<template>
	<view class="">
		<u--form :model="form" ref="uForm" :rules="rules">
			<u-form-item label="昵称" prop="name">
				<u-input v-model="form.name" />
			</u-form-item>
		</u--form>
		<u-button @click="submit">保存</u-button>
		<u-notify ref="uNotify" message="保存成功"></u-notify>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 状态栏高度，H5中，此值为0，因为H5不可操作状态栏
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				// 导航栏内容区域高度，不包括状态栏高度在内
				navbarHeight: 44,
				form: {
					name: this.$store.state.vuex_user.name,
				},
				rules: {
					name: [
						{
							required: true,
							message: '请输入昵称',
							trigger: ['blur', 'change']
						}
					]
				}
			}
		},
		methods: {
			submit() {
				this.$refs.uForm.validate().then(async res => {
					// 提交用户信息
					await uni.$u.http.put('/api/user', this.form)
					// 获取用户信息
					const userInfo = await uni.$u.http.get('/api/user')
					this.$u.vuex('vuex_user', userInfo)
					// 显示成功显示
					this.$refs.uNotify.show({
						top: 10,
						type: 'success',
						message: '保存成功',
						duration: 1500,
						safeAreaInsetTop:true
					})
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			}
		},
	}
</script>

<style lang="scss">

</style>
